import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
export default function Score() {
    const chartRef = useRef(null)
    useEffect(() => {
        function renderChart() {
            const myChart = echarts.init(chartRef.current);
            var colors = ["#FD7E6E", "#F9D067", "#0077FA"];
            var fontColor = "#0089fa";
            var percent = 90;
            const option = {
                series: [
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '80%',
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false,
                            offsetCenter: [0, '100%'],
                            fontSize: 15,
                            color: '#fff'
                        },
                        data: [{
                            value: percent
                        }],
                        title: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                width: 4,
                                color: [
                                    [0.1, colors[0]],
                                    [0.3, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: colors[0]
                                        }, {
                                            offset: 0.6,
                                            color: colors[1]
                                        }]
                                    )],
                                    [0.5, colors[1]],
                                    [0.8, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: colors[2]
                                        }, {
                                            offset: 0.8,
                                            color: colors[1]
                                        }]
                                    )],
                                    [1, colors[2]]
                                ],
                            }
                        },
                        splitLine: {
                            length: 5,
                            distance: 1,
                            lineStyle: {
                                width: 1,
                                color: '#0077FA'
                            }
                        },
                        axisTick: {
                            distance: 1,
                            length: 3,
                            lineStyle: {
                                width: 0.5,
                                color: '#0077FA'
                            }
                        },
                        axisLabel: {
                            show: false
                        }
                    },

                    {
                        name: '内层',
                        type: 'gauge',
                        radius: '62%',
                        min: 0,
                        max: 100,
                        center: ['50%', '50%'],
                        axisLine: {
                            lineStyle: {
                                width: 12,
                                color: [
                                    [0.1, colors[0]],
                                    [0.3, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: colors[0]
                                        }, {
                                            offset: 0.6,
                                            color: colors[1]
                                        }]
                                    )],
                                    [0.5, colors[1]],
                                    [0.8, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: colors[2]
                                        }, {
                                            offset: 0.7,
                                            color: colors[1]
                                        }]
                                    )],
                                    [1, colors[2]]
                                ],
                            }
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        detail: {
                            show: false,
                            offsetCenter: ['0', '110%'],
                            color: '#fff',
                            formatter: function (value) {
                                return value.toFixed(1) + "%";
                            },
                            fontSize: 19
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgb(0,191,255)'
                            }
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 4,
                            itemStyle: {
                                borderWidth: 2
                            }
                        },
                        markArea:{
                            itemStyle:{
                                color:'red'
                            }
                        },
                        pointer: {
                            width: 4,
                            itemStyle: {
                                color: '#165DFF'
                            }
                        },
                        data: [{
                            value: percent
                        }],
                        silent: false,
                        title: {
                            offsetCenter: [0, percent + '%'],//设置在线率位置
                            color: fontColor,
                        }
                    },
                ]
            }
            option && myChart.setOption(option);
        }
        renderChart()
    }, [])
    return (
        <div ref={chartRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
